import React, { memo,useEffect, shallowequal} from 'react'
import {useSelector,useDispatch} from 'react-redux'
import HNThemeHeaderRecommend from 'components/theme-header-recommend'
import HNTopList from 'components/top-list'
import {getUpListAction} from '../../store/actionCreactor'
import {RankingWrap} from './style'
export default memo(function HNRanking() {

  const {upList,newList,originList} = useSelector(state=>({
    upList:state.getIn(["recommend", "upList"]),
    newList:state.getIn(["recommend", "newList"]),
    originList:state.getIn(["recommend", "originList"]),
  }),shallowequal)
  const dispatch = useDispatch();

  useEffect(()=>{
    dispatch(getUpListAction(0));
    dispatch(getUpListAction(2));
    dispatch(getUpListAction(3));
  },[dispatch])
  return (
    <RankingWrap>
      <HNThemeHeaderRecommend title="榜单" />
      <div className="content">
        <HNTopList item={upList}/>
        <HNTopList item={newList}/>
        <HNTopList item={originList}/>
      </div>
    </RankingWrap>
  )
})
